<template>
    <el-row>
        <el-col :span="4">
        {{  state.stock }}
        </el-col>
        <el-button type="success">{{  state.prop }}</el-button>
    </el-row>

    <el-row>
        <el-button @click="setProp('weekPct')">pct</el-button>
        <el-button @click="setProp('incNum')">incNum</el-button>
        <el-button @click="setProp('pctSum')">pctSum</el-button>
        <el-button @click="setProp('disPct')">60W</el-button>
    </el-row>

    <div :id="'week-histogram-echart'" :style="{ width: '1000px', height: '600px' }"></div>

    <el-drawer v-model="drawer"  :with-header="false" size="800px">
        <el-table :data="state.drawerData"
            @cell-click="drawerCellClick"
        >
            <el-table-column prop="date" label="Date" width="240" sortable/>
            <el-table-column prop="stock" label="stock" width="140"/>
            <el-table-column prop="weekPct" label="weekPct" width="100" sortable/>
            <el-table-column prop="incNum" label="incNum" width="100" sortable/>
            <el-table-column prop="pctSum" label="pctSum" width="100" sortable/>
            <el-table-column prop="disPct" label="60W" width="100" sortable/>
        </el-table>
    </el-drawer>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import * as echarts from 'echarts'
import { buildData } from "../myechart/HistogramEchart";
import { useRouteQuery } from "../utils/useRoute";
import { getWeekData } from "../service/week";
import { openNewTableDisplay } from "../router";

let myChart = null

const drawer = ref(false)

const props = defineProps({
    stock: String,
})

const state = reactive({
     stock: "",
     rawData: "",
     drawerData: [],
     prop: "weekPct",
     bins : 20
})

state.stock = props.stock
state.bins = parseInt(useRouteQuery("bins", 20))

const initEchart = () => {
    myChart = echarts.init(document.getElementById('week-histogram-echart'))
    myChart.resize();
}

const loadEchart = () => {
    getWeekData(state.stock).then(res => {
        state.rawData = res.data

        buildDataV()
    })
}

const buildDataV = () => {
    let option = buildData(state.rawData, state.prop, state.bins)
    state.binsMap = option.myBinsMap
    myChart.setOption(option)

    // 添加点击事件监听
    myChart.on('click', function(params) {
        drawer.value = true;
        state.drawerData = state.binsMap.get(params.dataIndex)
    });
}

const drawerCellClick = (row, column, cell, event) => {
    let prop = column.property
    if (prop == 'date') {
        openNewTableDisplay(row.stock, row.date)
    }
}
const setProp = (prop) => {
    state.prop = prop
    buildDataV()
}

onMounted(()=> {
    initEchart()
    loadEchart()
})
</script>